﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Каталок товарів</title>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    
    <section>
      <header>
        <div class="logo">
          <!-- <h1><a href="index.html">Магазин СтудОК!</a></h1> -->
          <h1><a href="index.html">Магазин СтудОК!</a></h1>
        </div>
        <div class="menu">
          <nav>
            <a href="index.html">   Головна</a> |
            <a href="info.html">    Про магазин</a> |
            <a href="katalog.html"> Каталог</a> |
            <a href="order.html">   Оформити замовлення</a> |
            <a href="contacts.html">Контакти</a>
          </nav>
        </div>
      </header>

      <div class="layout">
        <div class="sidebar">

          <div class="catalog">
            <ul class="menulist">
              <li><a href="#">Підкаталог1</a>
                <ol>
                  <li><a href='#'>1</a></li>
                  <li><a href='#'>2</a></li>
                </ol>
              </li>
              <li><a href="#">Підкаталог2</a>
                <ol>
                  <li><a href="#">Товар1</a></li>
                  <li><a href="#">Товар2</a></li>
                </ol>
              </li>
              <li><a href="#">Підкаталог3</a>
                <ol>
                  <li><a href="#">Товар3</a></li>
                  <li><a href="#">Товар4</a></li>
                </ol>
              </li>
              <li><a href="#">Підкаталог4</a>
                <ol>
                  <li><a href="#">Товар4</a></li>
                  <li><a href="#">...</a></li>
                </ol>
              </li>
            </ul>
          </div>

          <div class="popular-products">
            <p>Популярні товари</p>
            <div class="list-popular-products">
              <div class="rel1"><a href="#">treats      </a></div>
              <div class="rel2"><a href="#">mockingbird </a></div>
              <div class="rel3"><a href="#">Philz Coffee</a></div>
              <div class="rel4"><a href="#">winners     </a></div>
              <div class="rel5"><a href="#">cookie      </a></div>
              <div class="rel1"><a href="#">smee        </a></div>
              <div class="rel2"><a href="#">Snow Leopard</a></div>
              <div class="rel3"><a href="#">peasant     </a></div>
              <div class="rel4"><a href="#">mockups     </a></div>
              <div class="rel5"><a href="#">baby's      </a></div>
              <div class="rel1"><a href="#">first       </a></div>
              <div class="rel2"><a href="#">toot        </a></div>
              <div class="rel3"><a href="#">Kindle      </a></div>
              <div class="rel4"><a href="#">iPod        </a></div>
            </div>
          </div>

          <div class="ask-questions">
            <form name="ask" method="post" action="input.php">
              <p>Задати питання</p>
              <textarea name="questions" cols="18" rows="2"></textarea>
              <input type="submit" value="Задати">
              <div class="clear"></div>
            </form>
          </div>
        </div>

        <div class="content">
          <div class="content-head">
            <div class="katalog-position"><a href="//">Каталог</a> >> <a href="//">Підкаталог 2</a></div>
            <div class="search">
              <form name="search"> <!-- method="post" action="input.php" -->
                <input type="text" size="30">
                <input type="submit" value="S">
              </form>
            </div>
          </div>
          <div class="products">
<!--             <figure>
              <img src="images/product.jpg" alt="product">
              <figcaption>Добавити в корзину</figcaption>
            </figure>
            <figure>
              <img src="images/product.jpg" alt="product">
              <figcaption>Добавити в корзину</figcaption>
            </figure> -->
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
            <div class="product">
              <img src="images/product.jpg" alt="product">
              <div class="add-product"><a href="//">Додати в корзину</a></div>
            </div>
          </div>

          <div class="button-panel">
            <div class="btn"> <a href="//">Previous </a> </div>
            <div class="btn"> <a href="//">1        </a> </div>
            <div class="btn"> <a href="//">2        </a> </div>
            <div class="btn"> <a href="//">3        </a> </div>
            <div class="btn"> <a href="//">4        </a> </div>
            <div class="btn"> <a href="//">5        </a> </div>
            <div class="btn"> <a href="//">Next     </a> </div>
          </div>
        </div>
      </div>

      <footer>
       <div class="footer-bg">
        <div class="copyright">
         <p><strong>Навчальний сайт «Магазин СтудОК!»</strong></p>
         <p>&copy; Рупташ Богдан</p>
        </div>
       </div>
      </footer>
    </section>
    <button>Click me</button>
  </body>
</html>